﻿@page "/samples/issue370"

<BSContainer>
    <BSRow>
        <BSCol>.col</BSCol>
    </BSRow>
    <BSRow>
        <BSCol>.col</BSCol>
        <BSCol>.col</BSCol>
        <BSCol>.col</BSCol>
        <BSCol>.col</BSCol>
    </BSRow>
    <BSRow>
        <BSCol XS="3">.col-3</BSCol>
        <BSCol XS="auto">.col-auto - variable width content</BSCol>
        <BSCol XS="3">.col-3</BSCol>
    </BSRow>
    <BSRow>
        <BSCol XS="6">.col-6</BSCol>
        <BSCol XS="6">.col-6</BSCol>
    </BSRow>
    <BSRow>
        <BSCol XS="6" SM="4">.col-6 .col-sm-4</BSCol>
        <BSCol XS="6" SM="4">.col-6 .col-sm-4</BSCol>
        <BSCol SM="4">.col-sm-4</BSCol>
    </BSRow>
    <BSRow>
        <BSCol SM="6" SMOrder="2" SMOffset="2">.col-sm-6 .col-sm-order-2 .offset-sm-2</BSCol>
    </BSRow>
    <BSRow>
        <BSCol SM="12" MD="6" MDOffset="3">.col-sm-12 .col-md-6 .offset-md-3</BSCol>
    </BSRow>
    <BSRow>
        <BSCol SM="auto" SMOffset="@offset">.col-sm .offset-sm-1</BSCol>
        <BSCol SM="auto" SMOffset="@offset">.col-sm .offset-sm-1</BSCol>
    </BSRow>
</BSContainer>
<BSButton OnClick="ChangeOffset">Change Offset to zero</BSButton>

@code {
    string offset = "1";

    void ChangeOffset(MouseEventArgs e)
    {
        offset="0";
        StateHasChanged();
    }
}
